<template>
  <!-- 客群详情 -->
  <el-card>
    <header style="display: flex;justify-content: space-between;align-items: center;">
      <h4>客群详情</h4>
      <el-button type="primary" plain size="mini" @click="$router.go(-1)">返回</el-button>
    </header>

    <header style="margin: 20px 10px; display: flex;align-items: center;">
      <h2>{{ pageData.groupName || $route.query.groupName }}</h2>
      <span :class="['header-tag', 'tag-' + pageData.groupState || 0]">{{ state[pageData.groupState || 0] }}</span>
    </header>

    <div style="display: flex;justify-content: space-between;align-items: center;">
      <h3 style="margin-left: 10px;">客群变化趋势</h3>
      <div style="width: 40%;">
        <el-select v-model="operateForm.timeType" class="selector" placeholder="请选择" @change="selectChange(operateForm)"
          style="width: 26%;margin-right: 3%;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- 按天 -->
        <el-date-picker v-if="operateForm.timeType === 'DAY'" v-model="operateForm.selectDate"
          @change="(val) => dateChange(val, { fileBytes: ['startDate', 'endDate'] }, 'operateForm')" key="tian"
          align="right" class="picker" :picker-options="pickerOptions" end-placeholder="结束日期" format="yyyy-MM-dd"
          range-separator="至" start-placeholder="开始日期" type="daterange" unlink-panels value-format="yyyy-MM-dd"
          style="width: 71%;">
        </el-date-picker>
        <!-- 自然周 -->
        <el-date-picker v-if="operateForm.timeType === 'WEEK'" v-model="operateForm.selectDate"
          @change="(val) => dateChange(val, { fileBytes: ['startDate', 'endDate'] }, 'operateForm')" key="zhou"
          class="picker" :picker-options="pickerOptions" format="yyyy 第 WW 周" placeholder="选择周" type="week"
          value-format="yyyy-MM-dd" style="width: 71%;">
        </el-date-picker>
        <!-- 自然月 -->
        <el-date-picker v-if="operateForm.timeType === 'MONTH'" v-model="operateForm.selectDate"
          @change="(val) => dateChange(val, { fileBytes: ['startDate', 'endDate'] }, 'operateForm')" key="yue"
          class="picker" :picker-options="pickerOptions" end-placeholder="结束月份" range-separator="至"
          start-placeholder="开始月份" type="monthrange" value-format="yyyy-MM" style="width: 71%;">
        </el-date-picker>
        <!-- 自然年 -->
        <div style="width: 71%;display: inline;">
          <el-date-picker v-if="operateForm.timeType === 'YEAR'" key="nian" v-model="operateForm.startDate"
            class="picker pickerYear" @change="yearchange" :picker-options="pickerOptions" placeholder="起始年"
            style="width: 31%;" type="year" value-format="yyyy">
          </el-date-picker>
          <span v-if="operateForm.timeType === 'YEAR'" class="range-word"> 至 </span>
          <el-date-picker v-if="operateForm.timeType === 'YEAR'" key="niana" v-model="operateForm.endDate"
            class="picker pickerYear" @change="yearchange" :picker-options="pickerOptions" format="yyyy" placeholder="结束年"
            style="width: 31%;" type="year" value-format="yyyy">
          </el-date-picker>
        </div>
      </div>
    </div>
    <el-divider class="divider-self"></el-divider>
    <div>
      <span>客群覆盖总人数：</span>
      <!-- 238，607 -->
      <span style="font-size: 18px;">{{ pageData.allCount || 0 }}</span>
      <span>人 计算完成时间：</span>
      <!-- 2022-11-17:00:00:00 -->
      <span>{{ pageData.calTime || '' }}</span>
    </div>
    <div class="ClientsDetails"></div>
  </el-card>
</template>
<script>
import { queCustomerSegDetail } from "@/api/communityOperating/customerPortrait.js";
import { parseTime } from '@/utils/common'
import * as echarts from 'echarts'
export default {
  name: "ClientsDetails",
  data() {
    return {
      state: {
        0: '正常运行',
        1: '已暂停',
      },
      operateForm: {
        timeType: 'MONTH',
        dateType: 'MONTH',
        selectDate: '',
        startDate: '',
        endDate: ''
      },
      pageData: {},
      options: [
        {
          value: 'DAY',
          label: '按天'
        },
        {
          value: 'WEEK',
          label: '自然周'
        },
        {
          value: 'MONTH',
          label: '自然月'
        },
        {
          value: 'YEAR',
          label: '自然年'
        }
      ],
      myChartFour: null,
      optionsClientsDetails: {
        color: '#10AEFF',
        legend: {
          show: false,
          right: 20,
          // icon: 'circle'
        },
        xAxis: {
          type: 'category',
          // data: ['快手', '英俊大超市', '企微']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 人'
          }
        },
        tooltip: {
          trigger: 'axis',
          show: true,
          formatter: `{b}:{c} \n\n`
        },
        series: [
          {
            name: '平台',
            // data: [4, 1, 0],
            type: 'bar',
            // barWidth: '20',
            itemStyle: {
              // borderRadius: 10
            },
            label: {
              show: true,
              position: 'top',
              formatter: `{c} 人`
            },
          }
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          return time > new Date().getTime()
        }
      }
    }
  },
  mounted() {
    this.operateForm.infoId = this.$route.query.infoId
    this.operateForm.startDate = parseTime(this.$route.query.createTime, '{y}-{m}');
    this.operateForm.endDate = parseTime(new Date(), '{y}-{m}');
    this.operateForm.selectDate = [this.operateForm.startDate, this.operateForm.endDate]

    // console.log('this.operateForm', this.operateForm);

    // this.myChartFour = echarts.init(document.querySelector('.ClientsDetails'))
    // this.getEchartsFour()
  },
  methods: {
    getEchartsFour() {
      this.operateForm.dateType = this.operateForm.timeType == 'WEEK' ? 'DAY' : this.operateForm.timeType
      queCustomerSegDetail(this.operateForm).then(res => {
        if (res.code == 200) {
          this.pageData = res.data
          let data = res.data.customerInfoResDTOList,
            sourceData = data.map(item => item.theDate) || [],
            countData = data.map(item => item.count) || []

          // console.log('sourceData', sourceData);
          // console.log('countData', countData, this.myChartFour);
          this.optionsClientsDetails.xAxis.data = sourceData
          this.optionsClientsDetails.series[0].data = countData
          this.myChartFour.setOption(this.optionsClientsDetails)
        } else this.$message.error(res.msg)
      })


      // let data = [
      //   {
      //     "count": 4,
      //     "customerSourceName": "快手",
      //     "insuranceType": "创新"
      //   },
      //   {
      //     "count": 1,
      //     "customerSourceName": "英俊大超市",
      //     "insuranceType": "创新"
      //   },
      //   {
      //     "count": 0,
      //     "customerSourceName": "企微",
      //     "insuranceType": "创新"
      //   }
      // ],
      //   sourceData = data.map(item => item.customerSourceName) || [],
      //   countData = data.map(item => item.count) || []

      // console.log('sourceData', sourceData);
      // console.log('countData', countData, this.myChartFour);
      // this.optionsClientsDetails.xAxis.data = sourceData
      // this.optionsClientsDetails.series[0].data = countData
      // this.myChartFour.setOption(this.optionsClientsDetails)
      // this.myChartFour.resize()
    },
    // 日期框change事件
    selectChange(form) {
      form.selectDate = ''
      form.startDate = ''
      form.endDate = ''
    },
    yearchange() {
      this.operateForm.startDate && this.operateForm.endDate && this.getEchartsFour()
    },
    // range 日期change事件
    dateChange(val, item, byte) {
      // console.log('val', val);
      let valNew = []
      if (this.operateForm.timeType == 'WEEK') {
        valNew = [parseTime(new Date(new Date(val).getTime() - 24 * 60 * 60 * 1000), '{y}-{m}-{d}'),
        parseTime(new Date(new Date(val).getTime() + 5 * 24 * 60 * 60 * 1000), '{y}-{m}-{d}')]
      } else valNew = val || ["", ""];
      item.fileBytes.forEach((fileByte, index) => this.$set(this[byte], fileByte, valNew[index]));
      val && this.getEchartsFour()
    },
  }
}
</script>
<style lang="scss" scoped>
.flex-box {
  display: flex;
}

.header-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 5px 8px;
  border-radius: 3px;
}

.tag-0 {
  background-color: #CCF783;
  color: #88AC4A;
}

.tag-1 {
  background-color: #fef0f0;
  color: #f56c6c;
}


.divider-self {
  margin: 10px 0;
}

.ClientsDetails {
  width: 100%;
  height: 400px;
}
</style>
